<template>
  <div>
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="类型" prop="type">
        <el-radio-group v-model="ruleForm.type">
          <!-- 修改菜单时，这一项禁用 -->
          <el-radio :disabled="$route.params.id > 0" :label="1">目录</el-radio>
          <el-radio :disabled="$route.params.id > 0" :label="2">菜单</el-radio>
        </el-radio-group>
      </el-form-item>
      <!--如果type是2：表示是菜单，才会有上级-->
      <el-form-item v-show="ruleForm.type === 2" label="上级" prop="pid">
        <el-select v-model="ruleForm.pid" placeholder="顶级目录">
          <el-option label="顶级目录" :value="0"></el-option>
          <el-option
            v-for="(item, index) in menuList"
            :key="index"
            :label="item.title"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="标题" prop="title">
        <el-input v-model="ruleForm.title"></el-input>
      </el-form-item>
      <!--如果type是1：表示是目录，才会有图标-->
      <el-form-item v-show="ruleForm.type === 1" label="图标" prop="icon">
        <el-input v-model="ruleForm.icon"></el-input>
      </el-form-item>
      <el-form-item v-show="ruleForm.type === 2" label="地址" prop="url">
        <el-input v-model="ruleForm.url"></el-input>
      </el-form-item>

      <el-form-item label="状态" prop="status">
        <el-radio-group v-model="ruleForm.status">
          <el-radio :label="1">正常</el-radio>
          <el-radio :label="2">禁用</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">{{
          $route.params.id ? "立即修改" : "立即添加"
        }}</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 表单的数据
      ruleForm: {
        type: 1,
        title: "",
        icon: "",
        status: 1,
        pid: 0,
        url: "",
      },
      // 表单的规则
      rules: {
        title: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
      },
      // 下拉选框的数据
      menuList: [],
    };
  },
  created() {
    //获取下拉列表的数据
    this.getMenuList();
    // 通过id判断是新增还是修改
    if (this.$route.params.id) {
      //  先获取这个菜单的数据，显示在页面上
      this.getMenuInfo(this.$route.params.id);
    }
  },
  methods: {
    getMenuList() {
      // get请求带参数的方法
      // 另一种方式get（'./menulist?istree: 1 '）
      this.$http.get("./menulist", { params: { istree: 1 } }).then((res) => {
        //赋值给下拉框
        this.menuList = res.list;
      });
    },
    // 修改菜单，获取这个菜单的数据
    getMenuInfo(id) {
      this.$http("/menuinfo", { params: { id } }).then((res) => {
        // 数据回显
        this.ruleForm = res.list;
      });
    },
    // 提交表单验证
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let url = "";
          //发送请求，添加数据
          if (this.$route.params.id) {
            // 有id说明是修改
            // 修改时需要额外添加id
            this.ruleForm.id = this.$route.params.id;
            url = "/menuedit";
          } else {
            // 没有ID说明是添加
            url = "/menuadd";
          }

          this.$http.post("/menuadd", this.ruleForm).then((res) => {
            if (res.code === 200) {
              this.$router.back(); /*添加成功后返回上个页面,查看效果*/
            }
          });
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style>
</style>